<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.l{
				float: left;
			}
			.bu{
				float: left;
				width: 90px;height: 25px;
				background-color: green;
				border-style: none;margin-right: 20px;
			}
		</style>
		<link rel="stylesheet" type="text/css"  href="../layui/css/layui.css"/>
	</head>
	<body>
	
		
			<div class="layui-layout layui-layout-admin">
			<div class="layui-header">
				<div class="layui-logo">统一身份认证系统</div>
				<ul class="layui-nav layui-layout-right" lay-filter="">
  					<li class="layui-nav-item"><a href="">最新活动</a></li>
  					<li class="layui-nav-item layui-this"><a href="">产品</a></li>
  					<li class="layui-nav-item"><a href="">大数据</a></li>
  					<li class="layui-nav-item">
                        <a href="javascript:;">解决方案</a>
                        <dl class="layui-nav-child"> <!-- 二级菜单 -->
					      <dd><a href="">移动模块</a></dd>
					      <dd><a href="">后台模版</a></dd>
					      <dd><a href="">电商平台</a></dd>
   						</dl>
  					</li>
  					<li class="layui-nav-item"><a href="">社区</a></li>
                </ul>
			</div>	
			
			
		</div>

			<div class="l">
			 	<ul class="layui-nav layui-nav-tree" lay-filter="test">
			    <li class="layui-nav-item ">
				    <a  href="javascript:; "><i class="layui-icon">&#xe68e;</i>首页</a>
				    
			    </li>
			    <li class="layui-nav-item">
			    	<a href=""><i class="layui-icon">&#xe64d;</i>Swagger</a></li>
			  	<li class="layui-nav-item">
				    <a href="javascript:;"><i class="layui-icon">&#xe716;</i>系统管理</a>
				    <dl class="layui-nav-child">
				        <dd><a href="" ><i class="layui-icon">&#xe663;</i>登录日志</a></dd>
				        <dd><a href=""><i class="layui-icon">&#xe655;</i>操作日志</a></dd>
				        <dd><a href=""><i class="layui-icon">&#xe612;</i>角色管理</a></dd>
				        <dd><a href=""><i class="layui-icon">&#xe770;</i>用户管理</a></dd>
				    </dl>
			  </li>
			   <li class="layui-nav-item"><a href="">   </a></li>
			    <li class="layui-nav-item"><a href="">   </a></li>
				<li class="layui-nav-item"><a href="">   </a></li>
				<li class="layui-nav-item"><a href="">   </a></li>
				<li class="layui-nav-item"><a href="">   </a></li>
			    <li class="layui-nav-item"><a href="">   </a></li>
			    <li class="layui-nav-item"><a href="">   </a></li>
			    <li class="layui-nav-item"><a href="">   </a></li>
			    <li class="layui-nav-item"><a href="">   </a></li>
			    <li class="layui-nav-item"><a href="">   </a></li>
			    <li class="layui-nav-item"><a href="">   </a></li>
			    <li class="layui-nav-item"><a href="">   </a></li>
			    <li class="layui-nav-item"><a href="">   </a></li>
			    <li class="layui-nav-item"><a href="">   </a></li>
			    <li class="layui-nav-item"><a href="">   </a></li>
			    <li class="layui-nav-item"><a href="">   </a></li>
			    <li class="layui-nav-item"><a href="">   </a></li>
			</ul>	
			</div>
			<div class="l">
				<div class="layui-tab">
				  <ul class="layui-tab-title">
				    <li class="layui-this">首页</li>
				    <li>用户管理<i class="layui-icon">&#x1006; </i></li>
				    <li>新增用户
				    	<i class="layui-icon">&#x1006; </i></li>
				    <li>角色管理<i class="layui-icon">&#x1006; </i></li>
				    <li>编辑角色<i class="layui-icon">&#x1006; </i></li>
				  </ul>
				  <div class="layui-tab-content">
				    <div class="layui-tab-item ">
				    	
				    </div>
				    <div class="layui-tab-item">
				    	<button class="bu">添加用户</button>
				    	<button class="bu">批量删除</button>
				    	<button class="bu">下载导入模板</button>
				    	<button class="bu">导入</button>
				    	<button class="bu">导出</button>
				    	账号：<input type="text" name="zhanghao" >
		 	                        密码：<input type="password" name="pas" >
		 	            
		 	            <table class="layui-table">
						  <colgroup>
						    <col width="20">
						    <col width="130">
						    <col width="80">
						    <col width="120">
						    <col width="130">
						    <col width="130">
						    <col width="8/*好 0">
						
						    
						  </colgroup>
						  <thead>
						    <tr>
						      <th><input type="checkbox"></th>
						      <th>账号</th>
						      <th>姓名</th>
						      <th>手机号码</th>
						      <th>籍贯</th>
						      <th>出生时间</th>
						      <th>账号是否启用</th>
						      <th>操作</th>
						    </tr> 
						  </thead>
						  <tbody>
						    <tr>
						      <td><input type="checkbox"></td>
						      <td>zhangsan</td>
						      <td>张三</td>
						      <td>1866</td>
						      <td>湖南</td>
						      <td>2016-11-29</td>
						      <td><form class="layui-form" action="">
						      		<input type="checkbox" name="switch" lay-skin="switch"></form></td>
						      <td>
						      	<button class="layui-btn layui-btn-xs">修改</button>
						      	<button class="layui-btn layui-btn-xs">重置密码</button>
						      	<button class="layui-btn layui-btn-xs  layui-btn-danger">删除</button>
						      </td>
						    </tr>
						    <tr>
						      <td><input type="checkbox"></td>
						      <td>2016-11-29</td>
						      <td>李四</td>
						      <td>贤心</td>
						      <td>浙江</td>
						      <td>2016-11-29</td>
						      <td><form class="layui-form" action="">
						      		<input type="checkbox" name="switch" lay-skin="switch"></form></td>
						      <td>
						      	<button class="layui-btn layui-btn-xs ">修改</button>
						      	<button class="layui-btn layui-btn-xs  ">重置密码</button>
						      	<button class="layui-btn layui-btn-xs  layui-btn-danger">删除</button>
						      </td>
						    </tr>
						  </tbody>
						</table>
		 	                        
				    </div>
				    <div class="layui-tab-item">内容3</div>
				    <div class="layui-tab-item">内容4</div>
				    <div class="layui-tab-item">内容5</div>
				  
				</div>
			</div>
 		 </div>

		
		<script src="../js/jquery-1.11.3.min.js"> </script>
		<script src="../layui/layui.js"></script>
		<script type="text/javascript">
		
			layui.use(['element','form'], function() {
				var element = layui.element;
				var form = layui.form;
		       form.render();
			});
		</script>
	</body>
</html>
